<template>
<div>
   <nav-bar>
     <div slot="left" class="left" @click="imgClick">
       <img src="~assets/img/common/back.svg" alt=""> 
     </div>
     <div slot="center" class="detail-nav">
       <div v-for="(item,index) in titles" class="detail-item" :class="{active:currentIndex===index}" @click="btnClick(index)" :key="item">{{item}}</div>
     </div>
   </nav-bar>
</div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar.vue'

export default {
  name:'DetailNavBar',
  components: { 
      NavBar
  },
  data(){
      return {
          titles:['商品','参数','评论','推荐'],
          currentIndex:0
      }
  },
  methods:{
      btnClick(index){
          this.currentIndex=index;
          this.$emit("btnClick",index)
      },
      imgClick(){
          this.$router.back()
      }
  }
}
</script>
<style scoped>
.detail-nav{display: flex;}
.detail-item{flex:1}
.active{color:red}
.left img{margin-top: 10px;}
</style>